<template>
  <div style="width: 310mm;margin: 0 auto; padding: 60px 0;">
    <div ref="print">
      <div style="font-size: 24px;text-align: center;">金华眼科医院报告单</div>

      <div class="print-moudle" v-if="checkList.length">
        <span class="print-title" style="float: left;">人员基本信息</span>
        <el-button type="info" class="noprint" style="float: right;" @click="printHandle">打印</el-button>
        <div style="clear: both;"></div>
        <hr />
        <el-row>
          <el-col :span="6">
            <span>姓名：</span>
            <span>{{personInfo.name}}</span>
          </el-col>
          <el-col :span="6">
            <span>姓别：</span>
            <span v-if="personInfo.gender == '0'">男</span>
            <span v-if="personInfo.gender == '1'">女</span>
            <!-- <span>{{valueChangeName(personInfo.gender,genderOption)}}</span> -->
          </el-col>
          <el-col :span="6">
            <span>出生年月：</span>
            <span>{{personInfo.birthDay}}</span>
          </el-col>
          <el-col :span="6">
            <span>民族：</span>
            <span>{{valueChangeName(personInfo.nation,nationalList)}}</span>
          </el-col>
          <!-- <el-col :span="6">
            <span>家长姓名：</span>
            <span>{{personInfo.personExtProp.fatherName || personInfo.personExtProp.motherName}}</span>
          </el-col> -->
          <el-col :span="6">
            <span>联系电话：</span>
            <span>{{personInfo.telPhone}}</span>
          </el-col>
          <el-col :span="6">
            <span>就诊卡号：</span>
            <span>{{personInfo.cardNum}}</span>
          </el-col>
          <el-col :span="12">
            <span>家庭住址：</span>
            <span>{{personInfo.address}}</span>
          </el-col>
        </el-row>
      </div>

      <div v-for="(item,index) in checkList" :key="'check'+index" style="margin-top: 20px;">
        <div class="print-moudle">
          <el-row>
            <el-col :span="4"><span class="print-title">体检详细信息 </span></el-col>
            <el-col :span="5"><span class="print-title">(初诊)</span></el-col>
            <el-col :span="4">
              <span>主检医生：</span>
              <span>{{item.ckCorneal.checkDoctorName}}</span>
            </el-col>
            <el-col :span="5">
              <span>主检部门：</span>
              <span>{{item.ckCorneal.deptName}}</span>
            </el-col>
            <el-col :span="5">
              <span>体检时间：</span>
              <span>{{item.ckCorneal.checkDate}}</span>
            </el-col>
          </el-row>
          <hr />
          <el-row>
            <el-col :span="6">
              <span>视力减退：</span>
              <span v-if="item.ckCorneal.hypopsiaYear">{{item.ckCorneal.hypopsiaYear}}年</span>
            </el-col>
            <el-col :span="6">
              <span>戴眼镜：</span>
              <span v-if="item.ckCorneal.weraYear">{{item.ckCorneal.weraYear}}年</span>
            </el-col>
            <el-col :span="6">
              <span>戴接触镜：</span>
              <span v-if="item.ckCorneal.contactLensYear">{{item.ckCorneal.contactLensYear}}年</span>
            </el-col>
            <el-col :span="6">
              <span>脱镜时间：</span>
              <span>{{item.ckCorneal.offTime}}</span>
            </el-col>
            <el-col :span="6">
              <span>现镜度数(OD)：</span>
              <span>{{item.ckCorneal.currentOD}}</span>
            </el-col>
            <el-col :span="6">
              <span>现镜度数(OS)：</span>
              <span>{{item.ckCorneal.currentOS}}</span>
            </el-col>
            <el-col :span="6">
              <span>原镜屈光度及验配时间：</span>
              <span>{{item.ckCorneal.orgDiopterTime}}</span>
            </el-col>
            <el-col :span="6">
              <span>瘢痕体质：</span>
              <span v-if="item.ckCorneal.cicatricial == '1'">是</span>
              <span v-if="item.ckCorneal.cicatricial == '0'">否</span>
            </el-col>
            <el-col :span="6">
              <span>眼病及眼科手术史：</span>
              <span v-if="item.ckCorneal.eyeHistorySurgery">{{item.ckCorneal.eyeHistorySurgery}}</span>
              <span v-else>无殊</span>
            </el-col>
            <el-col :span="6">
              <span>外伤手术史：</span>
              <span v-if="item.ckCorneal.drugAllergy">{{item.ckCorneal.drugAllergy}}</span>
              <span v-else>无殊</span>
            </el-col>
            <el-col :span="6">
              <span>药物过敏史：</span>
              <span v-if="item.ckCorneal.traunaHistorySurgery">{{item.ckCorneal.traunaHistorySurgery}}</span>
              <span v-else>无殊</span>
            </el-col>
            <el-col :span="6">
              <span>其他全身病史：</span>
              <span v-if="item.ckCorneal.otherMedical">{{item.ckCorneal.otherMedical}}</span>
              <span v-else>无殊</span>
            </el-col>
            <el-col :span="6">
              <span>家族史：</span>
              <span v-if="item.ckCorneal.familyHistory">{{item.ckCorneal.familyHistory}}</span>
              <span v-else>无殊</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 30px;">
            <el-col :span="24">
              <table class="print-table">
                <tr>
                  <th style="width: 120px;">检查项目</th>
                  <th style="width: 120px;">右眼</th>
                  <th style="width: 120px;">左眼</th>
                  <th style="width: 120px;" class="border-right">参考值</th>
                  <th style="width: 120px;">检查项目</th>
                  <th style="width: 120px;">右眼</th>
                  <th style="width: 120px;">左眼</th>
                  <th style="width: 120px;">参考值</th>
                </tr>
                <template v-for="(item1,index1) in item.checkDataValues">
                  <tr v-if="index1%2 == 0">
                    <td>{{item1.chName}}</td>
                    <td>{{item1.odValue}}</td>
                    <td>{{item1.osValue}}</td>
                    <td class="border-right">{{item1.standardValue}}</td>
                    <td v-if="index1 == item.checkDataValues.length - 1" :colspan="4"></td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].chName}}</td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].odValue}}</td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].osValue}}</td>
                    <td v-if="index1 < item.checkDataValues.length - 1">{{item.checkDataValues[index1 + 1].standardValue}}</td>
                  </tr>
                </template>

              </table>
            </el-col>
          </el-row>
          
          <!-- 影像列表 -->
          <div style="width: 100%;text-align: center;">
          	<template v-for="(imgItem,imgIndex) in item.ckCorneal.images">
          		<img :src="imgItem.path" alt="" style="max-width: 100%;">
          	</template>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import { fetchNationalList } from '@/api/admin/national'

  import { getVisitReportDataByPerson } from '@/api/pvm/person'
  // import { getVisitReportDataByPerson } from '@/api/pvm/arcoptometry'

  export default {
    data() {
      return {
        personInfo: {},
        checkList: [],
        optometry: {},
        checkDataValues: [],
        nationalList: [],
        refractiveOption: [],
        warningOption: [{value: 'R',name: '红色'},{value: 'Y',name: '黄色'},{value: 'B',name: '蓝色'}],
        genderOption: [{value: '0', name: '男'},{value: '1', name: '女'}],
        pencilGrasps: [{value: '0', name: '正确'},{value: '1', name: '错误'}],
        masterEye: [{value: '0', name: '右眼'},{value: '1', name: '左眼'}],
        eyePosition: [{value: '0',name: '正位'},{value: '1',name: '隐斜'},{value: '2',name: '显斜'}],
        habitHand: [{value: 'Y',name: '右手'},{value: 'Z',name: '左手'}],
        colorVision: [{value: '0',name: '正常'},{value: '1',name: '色弱'},{value: '2',name: '色盲'}],
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(personId){
        this.$nextTick(() => {
          remote('refractive_status').then(result => {
            this.refractiveOption = result.data.data
          })
          this.getNationalList().then(result => {
            getVisitReportDataByPerson(personId,1).then(response => {
              let resultData = response.data.data
              this.checkList = response.data.data

              if(this.checkList[0]){
                this.personInfo = this.checkList[0].personInfo
              }else{
                this.personInfo = {}
              }
              // this.optometry = resultData.optometry
              // this.checkDataValues = resultData.checkDataValues
            })
          })
        })
      },
      printHandle() {
        this.$print(this.$refs.print)
      },
      // 获取民族列表
      async getNationalList(){
        await fetchNationalList({ current: 1, size: 100 }).then(result => {
          this.nationalList = result.data.data.records
        })
      },
      //
      valueChangeName(value,option){
        let obj = {}
        obj = option.find(item => {
          if(item.id == value || item.value == value){
            return item
          }
        })
        if(obj && obj.name){
          return obj.name
        }
      },
      statusChangeName(value,option){
        let obj = {}
        obj = option.find(item => {
          if(item.value == value){
            return item
          }
        })
        if(obj && obj.label){
          return obj.label
        }
      }
    }
  }
</script>

<style>
  @media print {
    .noprint {
      display: none !important;
    }
  }
</style>
<style lang="scss" scoped>
  .print-moudle {
    margin-bottom: 20px;
  }

  .print-title {
    font-size: 18px;
    font-weight: 700;
  }

  .print-table {
    width: 90%;
    th {
      border-top: solid 1px #efefef;
      background-color: #f4f5f7
    }
    tr {
      border-bottom: solid 1px #efefef;
    }
    tr th, tr td {
      padding: 10px 3px;
      // border: solid 1px #e7e7e7;
      text-align: center;
    }
    .border-right {
      border-right: solid 1px #e7e7e7;
    }
  }
</style>
